<template>
  <div class="user">
    <UserSearch @query-click="handleQueryClick" @reset-click="handleResetClick" />
    <UserContent ref="contentRef" @new-click="handleNewClick" @edit-click="handleEditClick"/>
    <UserModal ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import UserSearch from './c-cpns/user-search.vue'
import UserContent from './c-cpns/user-content.vue'
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'

const contentRef = ref<InstanceType<typeof UserContent >>()

const handleQueryClick = (formData: any) => {
  // console.log(formData)
  contentRef.value?.fetchUserListData(formData)
}

const handleResetClick = () => {
  contentRef.value?.fetchUserListData()
}

//对modal组件的操作
const modalRef = ref<InstanceType<typeof UserModal >>()
const handleNewClick = () => {
  modalRef.value?.setModalVisible()
}

const handleEditClick = (itemData: any) => {
  // console.log(itemData)
  modalRef.value?.setModalVisible(false, itemData)
}

</script>

<style scoped lang="less">

</style>
